<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据安全监测-监测规则与策略管理</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e40af', // 主色调：冷静蓝色
                        'primary-dark': '#1e3a8a',
                        'text-primary': '#334155',
                        'text-secondary': '#64748b',
                        'bg-primary': '#f8fafc',
                        'bg-secondary': '#f1f5f9',
                        'bg-card': 'rgba(255, 255, 255, 0.9)',
                        'border': 'rgba(148, 163, 184, 0.4)',
                        'success': '#10b981',
                        'warning': '#f59e0b',
                        'danger': '#ef4444'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                        'fadeIn': 'fadeIn 0.3s ease-out',
                        'fadeOut': 'fadeOut 0.3s ease-in',
                        'scaleIn': 'scaleIn 0.3s ease-out',
                        'scaleOut': 'scaleOut 0.3s ease-in',
                        'slideInRight': 'slideInRight 0.3s ease-out',
                        'slideOutRight': 'slideOutRight 0.3s ease-in',
                        'slideInDown': 'slideInDown 0.3s ease-out',
                        'slideOutUp': 'slideOutUp 0.3s ease-in'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-4px)' }
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        fadeOut: {
                            '0%': { opacity: '1' },
                            '100%': { opacity: '0' }
                        },
                        scaleIn: {
                            '0%': { transform: 'scale(0.95)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' }
                        },
                        scaleOut: {
                            '0%': { transform: 'scale(1)', opacity: '1' },
                            '100%': { transform: 'scale(0.95)', opacity: '0' }
                        },
                        slideInRight: {
                            '0%': { transform: 'translateX(20px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' }
                        },
                        slideOutRight: {
                            '0%': { transform: 'translateX(0)', opacity: '1' },
                            '100%': { transform: 'translateX(20px)', opacity: '0' }
                        },
                        slideInDown: {
                            '0%': { transform: 'translateY(-20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        },
                        slideOutUp: {
                            '0%': { transform: 'translateY(0)', opacity: '1' },
                            '100%': { transform: 'translateY(-20px)', opacity: '0' }
                        }
                    }
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .glass-effect {
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
            }
            .grid-pattern {
                background-color: theme('colors.bg-primary');
                background-image: radial-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 0);
                background-size: 20px 20px;
            }
            .card-hover-effect {
                transition: all 0.2s ease;
            }
            .card-hover-effect:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
            }
            .card-hover-effect:active {
                transform: translateY(0);
                transition: transform 0.1s ease;
            }
            .active-indicator {
                position: relative;
                padding-left: 0.5rem;
            }
            .active-indicator::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0.25rem;
                bottom: 0.25rem;
                width: 3px;
                background-color: theme('colors.primary');
                border-radius: 0.125rem;
            }
            .text-balance {
                text-wrap: balance;
            }
            
            /* 按钮交互效果 */
            .btn-effect {
                transition: all 0.2s ease;
                position: relative;
                overflow: hidden;
            }
            .btn-effect::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.2);
                transform: translate(-50%, -50%);
                transition: width 0.6s, height 0.6s;
            }
            .btn-effect:active::after {
                width: 300px;
                height: 300px;
            }
            
            /* 列表项悬停效果 */
            .list-item-hover {
                transition: background-color 0.2s ease;
            }
            .list-item-hover:hover {
                background-color: theme('colors.bg-secondary');
            }
            
            /* 输入框焦点效果 */
            .input-focus {
                transition: all 0.2s ease;
            }
            .input-focus:focus {
                border-color: theme('colors.primary');
                box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
                outline: none;
            }
            
            /* 平滑过渡 */
            .smooth-transition {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            /* 滚动条美化 */
            .custom-scrollbar::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            .custom-scrollbar::-webkit-scrollbar-track {
                background: theme('colors.bg-secondary');
            }
            .custom-scrollbar::-webkit-scrollbar-thumb {
                background: rgba(148, 163, 184, 0.4);
                border-radius: 3px;
            }
            .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                background: rgba(148, 163, 184, 0.6);
            }
        }
    </style>
    <!-- 全局样式 -->
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }
        input[type="checkbox"] {
            accent-color: #1e40af;
        }
        select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
        }
        
        .policy-name-container:hover .edit-name-btn {
        opacity: 1;
    }
    
    .policy-name-input {
        width: 200px;
        padding: 2px 6px;
        border: 1px solid #1e40af;
        border-radius: 4px;
        outline: none;
        font-size: 0.875rem;
    }
    
    /* 策略分组选中状态样式 */
    .policy-group-item.active-indicator {
        border-left: 3px solid #1e40af;
        font-weight: 600;
    }
    
    .policy-group-item.active-indicator .group-icon {
        color: #1e40af;
    }
    </style>
</head>
<body class="grid-pattern min-h-screen">
    <!-- 移动端菜单按钮 -->
    <button id="mobile-menu-btn" class="fixed top-4 left-4 z-50 bg-primary text-white p-2 rounded-lg shadow-lg lg:hidden">
        <i class="fa fa-bars"></i>
    </button>
    
    <!-- 移动端详情面板切换按钮 -->
    <button id="mobile-detail-btn" class="fixed top-4 right-4 z-50 bg-primary text-white p-2 rounded-lg shadow-lg lg:hidden hidden">
        <i class="fa fa-info-circle"></i>
    </button>
    
    <div id="app" class="flex h-screen overflow-hidden">
        <!-- 主内容区域 -->
        <div class="flex-1 flex flex-col">
            <!-- 顶部操作区域 -->
            <header class="bg-bg-card border-b border-border/20 p-4 shadow-sm glass-effect">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-text-primary">监测规则与策略管理</h1>
                    <div class="flex flex-wrap items-center gap-3">
                        <div class="relative min-w-[200px]">
                            <input type="text" id="search-input" placeholder="搜索策略..." 
                                class="w-full pl-10 pr-4 py-2 bg-white/80 border border-border/40 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-300">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                        </div>
                        <button id="add-policy-btn" class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-all duration-300 shadow-sm flex items-center gap-2">
                            <i class="fa fa-plus"></i>
                            <span class="hidden sm:inline">新增策略</span>
                        </button>
                        <button id="import-btn" class="bg-bg-secondary hover:bg-bg-primary text-text-primary px-3 py-2 rounded-lg transition-all duration-300 shadow-sm flex items-center gap-2">
                            <i class="fa fa-upload"></i>
                            <span class="hidden sm:inline">导入</span>
                        </button>
                        <button id="export-btn" class="bg-bg-secondary hover:bg-bg-primary text-text-primary px-3 py-2 rounded-lg transition-all duration-300 shadow-sm flex items-center gap-2">
                            <i class="fa fa-download"></i>
                            <span class="hidden sm:inline">导出</span>
                        </button>
                    </div>
                </div>
            </header>
            
            <!-- 主要内容容器 -->
            <main class="flex-1 flex overflow-hidden">
                <!-- 左侧策略分组导航树 -->
                <aside class="w-64 bg-bg-card border-r border-border/20 overflow-y-auto transition-all duration-300 shrink-0 z-10 fixed inset-y-0 left-0 lg:static lg:translate-x-0 -translate-x-full" id="sidebar">
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold text-text-primary">策略分组</h2>
                            <div class="flex gap-2">
                                <button id="expand-all-btn" class="p-1 text-text-secondary hover:text-primary transition-colors duration-300" title="展开全部">
                                    <i class="fa fa-angle-double-down"></i>
                                </button>
                                <button id="collapse-all-btn" class="p-1 text-text-secondary hover:text-primary transition-colors duration-300" title="折叠全部">
                                    <i class="fa fa-angle-double-up"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 策略分组树 -->
                        <div class="space-y-1" id="policy-groups-container">
                            <div class="policy-group-item p-2 rounded-lg hover:bg-primary/10 cursor-pointer transition-colors duration-300 active-indicator bg-primary/10" data-group-id="all">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <i class="fa fa-folder-open text-primary"></i>
                                        <span class="group-name">所有策略</span>
                                    </div>
                                    <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">12</span>
                                </div>
                            </div>
                            
                            <div class="policy-group-item p-2 rounded-lg hover:bg-primary/10 cursor-pointer transition-colors duration-300" data-group-id="data-leakage">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <i class="fa fa-folder text-primary/70"></i>
                                        <span class="group-name">数据泄露防护</span>
                                    </div>
                                    <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">5</span>
                                </div>
                            </div>
                            
                            <div class="policy-group-item p-2 rounded-lg hover:bg-primary/10 cursor-pointer transition-colors duration-300" data-group-id="abnormal-access">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <i class="fa fa-folder text-primary/70"></i>
                                        <span class="group-name">异常访问检测</span>
                                    </div>
                                    <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">3</span>
                                </div>
                            </div>
                            
                            <div class="policy-group-item p-2 rounded-lg hover:bg-primary/10 cursor-pointer transition-colors duration-300" data-group-id="compliance">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <i class="fa fa-folder text-primary/70"></i>
                                        <span class="group-name">合规性监控</span>
                                    </div>
                                    <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">4</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 侧边栏折叠按钮 (仅在桌面显示) -->
                            <div class="absolute left-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:block hidden">
                                <button id="toggle-sidebar-btn" class="w-6 h-12 bg-bg-card border border-border/40 rounded-r-lg flex items-center justify-center text-text-secondary hover:text-primary transition-colors duration-300 shadow-sm">
                                    <i class="fa fa-angle-left"></i>
                                </button>
                            </div>
                </aside>
                
                <!-- 中间策略列表区域 -->
                <div class="flex-1 overflow-y-auto bg-bg-primary p-4">
                    <div class="max-w-full">
                        <!-- 工具栏 -->
                        <div class="flex flex-wrap items-center justify-between mb-4 gap-4">
                            <div>
                                <span class="text-text-secondary">共 <span class="text-primary font-medium" id="total-count">12</span> 条策略</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <div class="relative">
                                    <select id="view-selector" class="bg-white/80 border border-border/40 rounded p-1.5 pr-8 text-sm appearance-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                                        <option value="all">全部策略</option>
                                        <option value="enabled">已启用策略</option>
                                        <option value="disabled">已禁用策略</option>
                                        <option value="high-priority">高优先级策略</option>
                                    </select>
                                    <i class="fa fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-text-secondary pointer-events-none text-xs"></i>
                                </div>
                                <button id="batch-actions-btn" class="text-text-secondary hover:text-primary px-2 py-1.5 rounded transition-colors duration-300" title="批量操作">
                                    <i class="fa fa-cog"></i>
                                </button>
                                <button id="refresh-btn" class="text-text-secondary hover:text-primary px-2 py-1.5 rounded transition-colors duration-300" title="刷新">
                                    <i class="fa fa-refresh"></i>
                                </button>
                                <div class="relative">
                                    <select id="page-size-selector" class="bg-white/80 border border-border/40 rounded p-1.5 text-sm">
                                        <option value="10">10条/页</option>
                                        <option value="20">20条/页</option>
                                        <option value="50">50条/页</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 表格头部 -->
                        <div class="bg-bg-card rounded-t-lg border border-border/20 p-3 overflow-hidden">
                            <!-- 桌面版表头 -->
                            <div class="hidden sm:grid sm:grid-cols-12 sm:gap-4">
                                <div class="col-span-1 flex items-center">
                                    <input type="checkbox" id="select-all-checkbox" class="rounded text-primary focus:ring-primary">
                                </div>
                                <div class="col-span-3 flex items-center font-medium cursor-pointer hover:text-primary transition-colors duration-300" data-sort="name">
                                    <span>策略名称</span>
                                    <i class="fa fa-sort-amount-asc ml-1 text-xs"></i>
                                </div>
                                <div class="col-span-2 flex items-center font-medium cursor-pointer hover:text-primary transition-colors duration-300" data-sort="type">
                                    <span>策略类型</span>
                                    <i class="fa fa-sort ml-1 text-xs"></i>
                                </div>
                                <div class="col-span-1 flex items-center font-medium cursor-pointer hover:text-primary transition-colors duration-300" data-sort="priority">
                                    <span>优先级</span>
                                    <i class="fa fa-sort ml-1 text-xs"></i>
                                </div>
                                <div class="col-span-1 flex items-center font-medium cursor-pointer hover:text-primary transition-colors duration-300" data-sort="status">
                                    <span>状态</span>
                                    <i class="fa fa-sort ml-1 text-xs"></i>
                                </div>
                                <div class="col-span-3 flex items-center font-medium cursor-pointer hover:text-primary transition-colors duration-300" data-sort="lastModified">
                                    <span>最后修改时间</span>
                                    <i class="fa fa-sort ml-1 text-xs"></i>
                                </div>
                                <div class="col-span-1 flex items-center font-medium">操作</div>
                            </div>
                            <!-- 移动端表头 -->
                            <div class="sm:hidden flex items-center">
                                <input type="checkbox" id="mobile-select-all-checkbox" class="rounded text-primary focus:ring-primary mr-2">
                                <span class="font-medium">策略列表</span>
                            </div>
                        </div>
                        
                        <!-- 表格内容 -->
                        <div class="border-x border-b border-border/20 rounded-b-lg overflow-hidden" id="policy-list-container">
                            <!-- 表格行将通过JavaScript动态生成 -->
                            <div class="flex items-center justify-center py-12 text-text-secondary">
                                <div class="text-center">
                                    <i class="fa fa-spinner fa-spin text-3xl text-primary/30 mb-3"></i>
                                    <p>加载中...</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 分页 -->
                        <div class="flex flex-wrap items-center justify-between mt-4 gap-4" id="pagination-container">
                            <div class="text-text-secondary text-sm">
                                显示 <span id="page-range">1-10</span> 条，共 <span id="pagination-total">12</span> 条
                            </div>
                            <div class="flex items-center">
                                <button id="prev-page-btn" class="px-3 py-1 border border-border/40 rounded-l-lg text-text-secondary hover:bg-bg-secondary transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button class="px-3 py-1 border-t border-b border-border/40 bg-primary text-white">1</button>
                                <button class="px-3 py-1 border-t border-b border-border/40 text-text-secondary hover:bg-bg-secondary transition-colors duration-300">2</button>
                                <button id="next-page-btn" class="px-3 py-1 border border-border/40 rounded-r-lg text-text-secondary hover:bg-bg-secondary transition-colors duration-300">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧策略详情面板 -->
                <aside class="w-full sm:w-96 bg-bg-card border-l border-border/20 overflow-y-auto transition-all duration-300 shrink-0 z-10 fixed inset-y-0 right-0 lg:static lg:translate-x-0 translate-x-full" id="detail-panel">
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold text-text-primary">策略详情</h2>
                            <button id="toggle-panel" class="text-text-secondary hover:text-primary transition-colors duration-300">
                                <i class="fa fa-angle-left"></i>
                            </button>
                        </div>
                        
                        <div id="policy-detail-container" class="text-center py-8 text-text-secondary">
                            <div class="mb-4 animate-float">
                                <i class="fa fa-info-circle text-6xl text-primary/20"></i>
                            </div>
                            <p>请选择一条策略查看详细信息</p>
                        </div>
                    </div>
                </aside>
            </main>
        </div>
    </div>

    <!-- 策略创建/编辑向导模态框 -->
    <div id="policy-wizard-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div class="p-4 border-b border-border/20 flex items-center justify-between">
                <h2 class="text-xl font-bold text-text-primary">创建新策略</h2>
                <button id="close-wizard-btn" class="text-text-secondary hover:text-text-primary">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <!-- 向导步骤指示器 -->
                <div class="mb-6">
                    <div class="flex items-center justify-between">
                        <div class="w-full flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center wizard-step-active">1</div>
                            <div class="flex-1 h-1 bg-primary mx-2 wizard-step-line-active"></div>
                            <div class="w-8 h-8 rounded-full bg-bg-secondary text-text-secondary flex items-center justify-center">2</div>
                            <div class="flex-1 h-1 bg-bg-secondary mx-2"></div>
                            <div class="w-8 h-8 rounded-full bg-bg-secondary text-text-secondary flex items-center justify-center">3</div>
                            <div class="flex-1 h-1 bg-bg-secondary mx-2"></div>
                            <div class="w-8 h-8 rounded-full bg-bg-secondary text-text-secondary flex items-center justify-center">4</div>
                        </div>
                    </div>
                    <div class="flex justify-between text-sm mt-2">
                        <span class="text-primary font-medium">基础信息</span>
                        <span class="text-text-secondary">检测内容</span>
                        <span class="text-text-secondary">检测通道</span>
                        <span class="text-text-secondary">检测动作</span>
                    </div>
                </div>
                
                <!-- 向导内容区域 -->
                <div id="wizard-content">
                    <!-- 步骤1: 基础信息 -->
                    <div class="wizard-step wizard-step-1">
                        <div class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-text-primary mb-1">策略名称 <span class="text-danger">*</span></label>
                                    <input type="text" class="w-full px-3 py-2 border border-border/40 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="请输入策略名称">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-text-primary mb-1">策略类型 <span class="text-danger">*</span></label>
                                    <select class="w-full px-3 py-2 border border-border/40 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary">
                                        <option value="">请选择策略类型</option>
                                        <option value="basic">基础策略</option>
                                        <option value="advanced">高级策略</option>
                                        <option value="custom">自定义策略</option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-text-primary mb-1">策略备注</label>
                                <textarea class="w-full px-3 py-2 border border-border/40 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary" rows="3" placeholder="请输入策略备注信息"></textarea>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-text-primary mb-1">归属策略组 <span class="text-danger">*</span></label>
                                    <select class="w-full px-3 py-2 border border-border/40 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary">
                                        <option value="">请选择策略组</option>
                                        <option value="data-leakage">数据泄露防护</option>
                                        <option value="abnormal-access">异常访问检测</option>
                                        <option value="compliance">合规性监控</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-text-primary mb-1">策略优先级 <span class="text-danger">*</span></label>
                                    <div class="flex items-center gap-3">
                                        <input type="range" min="1" max="10" value="5" class="w-full h-2 bg-bg-secondary rounded-lg appearance-none cursor-pointer" id="priority-slider">
                                        <span class="text-sm font-medium" id="priority-value">5</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤2-4: 将通过JavaScript动态显示 -->
                </div>
            </div>
            <div class="p-4 border-t border-border/20 flex justify-end gap-3">
                <button id="prev-step-btn" class="px-4 py-2 bg-bg-secondary text-text-primary rounded-lg transition-all duration-300 hidden">
                    <i class="fa fa-angle-left mr-1"></i> 上一步
                </button>
                <button id="next-step-btn" class="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg transition-all duration-300">
                    下一步 <i class="fa fa-angle-right ml-1"></i>
                </button>
                <button id="save-draft-btn" class="px-4 py-2 bg-bg-secondary text-text-primary rounded-lg transition-all duration-300">
                    保存草稿
                </button>
                <button id="submit-policy-btn" class="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg transition-all duration-300 hidden">
                    发布策略
                </button>
            </div>
        </div>
    </div>

    <!-- 批量操作确认模态框 -->
    <div id="batch-confirm-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-lg max-w-md w-full">
            <div class="p-4 border-b border-border/20">
                <h3 class="text-lg font-semibold text-text-primary">确认删除</h3>
            </div>
            <div class="p-6">
                <div class="text-center mb-4">
                    <i class="fa fa-exclamation-triangle text-warning text-3xl mb-2"></i>
                    <p class="text-text-secondary">确定要删除选中的 <span class="font-medium text-danger" id="selected-count">0</span> 条策略吗？此操作不可撤销。</p>
                </div>
                <div class="bg-bg-secondary p-3 rounded-lg">
                    <p class="text-sm text-text-secondary">
                        <i class="fa fa-info-circle text-primary mr-1"></i>
                        影响分析：删除后将影响相关监控任务和告警配置
                    </p>
                </div>
            </div>
            <div class="p-4 border-t border-border/20 flex justify-end gap-3">
                <button id="cancel-batch-btn" class="px-4 py-2 bg-bg-secondary text-text-primary rounded-lg transition-all duration-300">
                    取消
                </button>
                <button id="confirm-batch-btn" class="px-4 py-2 bg-danger hover:bg-danger/90 text-white rounded-lg transition-all duration-300">
                    确认删除
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript 文件引入 -->
    <script src="data.js"></script>
    <script src="script.js"></script>
</body>
</html>